<template>
  <el-dialog
    :width="props.width"
    :title="props.title"
    :close-on-click-modal="false"
  >
    <slot name="dialog-content-slot"></slot>
    <template #footer>
      <template v-if="props.leftBtnAreaVisible">
        <div style="float: left">
          <el-button
            type="primary"
            @click="previousRecord"
            v-show="true"
            :disabled="props.previousDisabled"
            >上一条
          </el-button>
          <el-button
            type="primary"
            @click="nextRecord"
            v-show="true"
            :disabled="props.nextDisabled"
            >下一条
          </el-button>
        </div>
      </template>
      <el-button type="primary" @click="confirm('confirm')">确认</el-button>
      <el-button type="primary" @click="confirm('confirmAndClose')"
        >确认并关闭</el-button
      >
      <el-button @click="close()">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
export interface dialogProps {
  width?: string;
  title?: string;
  leftBtnAreaVisible?: boolean;
  previousDisabled?: boolean;
  nextDisabled?: boolean;
}

const props = withDefaults(defineProps<dialogProps>(), {
  width: "50%",
  title: "测试",
  leftBtnAreaVisible: false,
  previousDisabled: false,
  nextDisabled: false,
});

const emit = defineEmits<{
  (e: "confirm", type: string): void;
  (e: "close"): void;
  (e: "previousRecord"): void;
  (e: "nextRecord"): void;
}>();

const confirm = async (type: string) => {
  await emit("confirm", type);
};

// 关闭页面
const close = () => {
  emit("close");
};

const previousRecord = () => {
  emit("previousRecord");
};
const nextRecord = () => {
  emit("nextRecord");
};
</script>

<style scoped></style>
